<!-- 异步加载组件 -->
<template>
    <section>
        <h1>parent</h1>
        <el-button @click="handleClick">Load Child</el-button>
        <AsynChild v-if="showChild" />
    </section>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
import LoadingComp from './loading.vue'
import ErrorComp from '../404/404.vue'

const showChild = ref(false);
function handleClick() {
    showChild.value = true;
}

const AsynChild = defineAsyncComponent({
    loader: () => import("../basic/button.vue"),
    loadingComponent: LoadingComp,
    errorComponent: ErrorComp,
})
</script>

<style scoped>
section {
    padding: 1em;
    background: rgba(180, 180, 0, 0.2);
}
</style>